<template>
  <view class="page">
    <header-vue :back="true" :title="title"></header-vue>
    <view class="page-content">
      <!-- 充值卡片 -->
      <view class="recharge-card">
        <!-- 充值金额输入 -->
        <view class="amount-input-section">
          <view class="section-title">充值金额</view>
          <view class="input-container">
            <text class="currency-symbol">￥</text>
            <input
              v-model="rechargeAmount"
              type="number"
              placeholder="请输入充值金额"
              class="amount-input"
              @input="handleAmountInput"
            />
          </view>
        </view>
      </view>
      <view class="recharge-card">
        <!-- 快捷金额选择 -->
        <view class="quick-amount-section">
          <view class="section-title">充值金额选择:</view>
          <view class="amount-buttons">
            <button
              v-for="amount in quickAmounts"
              :key="amount"
              class="amount-btn"
              :class="{ active: rechargeAmount == amount }"
              @click="selectAmount(amount)"
            >
              ￥{{ amount }}
            </button>
          </view>
        </view>
      </view>
      <!-- 确认按钮 -->
      <view class="confirm-section">
        <button class="confirm-btn" @click="handleConfirm">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";

export default {
  data() {
    return {
      title: "充值",
      rechargeAmount: "",
      quickAmounts: [300, 500, 1000, 2000],
    };
  },
  components: {
    headerVue,
  },
  computed: {
    canConfirm() {
      return this.rechargeAmount && this.rechargeAmount > 0;
    },
  },
  methods: {
    // 处理金额输入
    handleAmountInput() {
      // 可以添加输入验证逻辑
      if (this.rechargeAmount < 0) {
        this.rechargeAmount = "";
      }
    },

    // 选择快捷金额
    selectAmount(amount) {
      this.rechargeAmount = amount;
    },

    // 确认充值
    handleConfirm() {
      if (!this.canConfirm) return;

      uni.showLoading({
        title: "处理中...",
      });

      // 模拟充值请求
      setTimeout(() => {
        uni.hideLoading();

        uni.showModal({
          title: "确认充值",
          content: `确定要充值 ￥${this.rechargeAmount} 吗？`,
          success: (res) => {
            if (res.confirm) {
              // 这里调用充值API
              uni.showToast({
                title: "充值成功",
                icon: "success",
                duration: 2000,
              });

              // 返回上一页
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            }
          },
        });
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #f2f2f2;

  .page-content {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;
    padding: 28rpx 32rpx;
  }
}

.recharge-card {
  padding: 28rpx;
  margin-bottom: 28rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 30rpx 30rpx 30rpx 30rpx;
}

.amount-input-section {
  // padding-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 600;
  margin-bottom: 28rpx;
}

.input-container {
  display: flex;
  align-items: center;

  padding-top: 10rpx;
  padding-bottom: 28rpx;
  ::v-deep .uni-input-placeholder {
    font-weight: 400;
    font-size: 30rpx;
    color: #999999;
  }
}

.currency-symbol {
  font-weight: 500;
  margin-right: 10rpx;
  font-size: 48rpx;
  color: #333333;
}

.amount-input {
  flex: 1;
  font-size: 36rpx;
  color: #333;
  height: 50rpx;
  line-height: 50rpx;

  &::placeholder {
    color: #cccccc;
    font-size: 28rpx;
  }
}

.quick-amount-section {
  margin-bottom: 10rpx;
}

.amount-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40rpx;
}

.amount-btn {
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  border: 2rpx solid #dddddd;
  background: #fff;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 32rpx;
  color: #333333;

  width: 100%;
  font-weight: 500;
  transition: all 0.3s ease;

  &.active {
    font-size: 32rpx;
    color: #0170b1;
    background: #e2f4ff;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    border: 2rpx solid #0785cf;
  }

  &::after {
    border: none;
  }
}

.confirm-section {
  padding: 0 20rpx;
}

.confirm-btn {
  width: 630rpx;
  height: 76rpx;
  background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
  border-radius: 60rpx 60rpx 60rpx 60rpx;
  line-height: 76rpx;
  border: none;

  font-size: 36rpx;
  color: #ffffff;

  &::after {
    border: none;
  }
}
</style>
